<template>
  <div class="image-list">
    <div class="list-wrap">
      <draggable @end="onEnd" tag="ul" v-model="uploadImgList">
        <div
            :key="index"
            :style="{ backgroundImage: `url(${item.path})` }"
            @mouseleave.prevent="itemMouseleave(index)"
            @mouseover.prevent="itemMouseover(index)"
            class="image-item"
            v-for="(item, index) in uploadImgList"
        >
          <div class="label">
            <i class="el-icon-upload-success el-icon-check icon-success"></i>
          </div>
          <div class="mask" v-show="index === showRemoveIndex">
            <i @click="deleteImg(index)" class="el-icon-delete bin"></i>
          </div>

        </div>
      </draggable>
      <el-upload
          ref="upload"
          style="float: left"
          :action="action"
          :multiple="limit>1"
          :limit="limit"
          :http-request="uploadImg"
          :on-success="uploadImgSuccess"
          :before-upload="beforeUploadHandler"
          :show-file-list="false"
          list-type="picture-card"
          v-show="count<limit">
        <i class="el-icon-plus"/>
      </el-upload>
    </div>
  </div>
</template>

<script>
import * as upload from '@/utils/upload'
import * as uploadApi from '@/api/upload'
import draggable from 'vuedraggable'

export default {
  name: "index",
  components: {
    draggable
  },
  props: {
    limit: {
      type: Number,
      default() {
        return 1
      }
    }
  },
  data() {
    return {
      showRemoveIndex: -1,
      count: 0,
      action: '',
      uploadImgList: [],
    }
  },
  methods: {
    exceedHandler(file, fileList) {
      console.log(file)
      console.log(fileList)
    },
    //  拖拽完毕
    onEnd(value) {
      this.returnImgValue()
    },
    //  返回给父组件值
    returnImgValue() {
      //  清空upload组件的上传列表，防止limit限制导致无法继续上传的bug
      this.$refs.upload.clearFiles()
      let values = []
      this.uploadImgList.forEach(o => {
        values.push(o.dic)
      })
      this.$emit("on-change", values)
    },
    //  鼠标离开 隐藏删除按钮
    itemMouseleave(index) {
      this.showRemoveIndex = -1
    },
    //  鼠标放在上面 显示删除按钮
    itemMouseover(index) {
      this.showRemoveIndex = index
    },
    //  上传文件
    uploadImg(option) {
      upload.uploadAndGetPath(option)
    },
    beforeUploadHandler(file) {
      let fileName = file.name.split('.')
      let suffix = fileName[fileName.length - 1]
      const imgList = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      let isImg = imgList.some(function (item) {
        return item === suffix
      })
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImg) {
        this.$message.error('上传图片只能是 JPG|GIF/PNG/BMP 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isImg && isLt2M
    },
    deleteImg(index) {
      this.count--
      this.uploadImgList.splice(index, 1)
      this.returnImgValue()
    },
    uploadImgSuccess(value) {
      this.count++
      this.uploadImgList.push(value)
      this.returnImgValue()
    },
    //  初始显示
    initImg(values) {
      if (!values || values.length <= 0) {
        return
      }
      this.count = values.length
      uploadApi.getImgPathList(values).then(res => {
        let mImgPath = []
        values.forEach((o, index) => {
          mImgPath.push({
            dic: o,
            path: res.data[index]
          })
        })
        this.uploadImgList = mImgPath
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.image-list
  width 100%
  float left

  &:after
    display block
    clear both
    content ''

  .list-wrap
    float left

    ul
      overflow hidden
      display inline-block
      float left

    .image-item
      width 146px
      height 146px
      position relative
      margin-right 10px
      margin-bottom 10px
      border 1px solid #c0ccda
      background-size 100% 100%
      border-radius 6px
      float left
      overflow hidden
      cursor pointer

      .label
        display flex
        justify-content center
        align-items center
        width 46px
        height 26px
        background-color #13ce66
        color #ffffff
        transform rotate(45deg)
        text-align center
        position absolute
        right -17px
        top -7px
        box-shadow 0 1px 1px #ccc

        .icon-success
          transform rotate(-45deg)

    .mask
      width 100%
      height 100%
      border-radius 6px
      background-color rgba(0, 0, 0, 0.5)
      position relative

      .bin
        color #fff
        font-size 20px
        position absolute
        top 43%
        left 45%

    .upload-machine
      width 146px
      height 146px
      position relative
      border 1px dashed #d9d9d9
      background-size 100% 100%
      border-radius 6px
      float left
      overflow hidden
      cursor pointer
      display flex
      align-items center
      justify-content center

      .el-uploader-icon
        font-size 28px
        color #8c939d
        width 146px
        height 146px
        line-height 146px
        text-align center
</style>
